<script setup></script>

<template>
  <div class="bg-black relative" style="background: linear-gradient(0deg, rgb(10, 21, 64) 0%, rgb(19, 31, 82) 72.27%, rgb(6, 15, 51) 98%)">
    <img
      alt="一键检测 AI 内容"
      loading="lazy"
      decoding="async"
      data-nimg="fill"
      class="object-cover"
      src="@/assets/img/cta.jpg"
      _mstalt="721149"
      _msthash="951"
      style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent"
    />
    <div class="py-[120px] max-w-[992px] px-4 mx-auto relative text-white text-center lg:py-12">
      <h2
        class="text-6xl text-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#FF8811] via-[#ED27FF] to-[#7F50FB] lg:text-xl"
        _msttexthash="20384676"
        _msthash="952"
      >
        一键检测 AI 内容
      </h2>
      <p class="pt-3 text-lg lg:pt-2 lg:text-md" _msttexthash="247670215" _msthash="953">
        选择我们的 AI 检测器来扫描任何类型的内容，以获得准确可靠的结果。
      </p>
      <button
        class="bg-[#165DFF] text-white hover:bg-primary md:px-5 md:py-3 md:text-base mt-8 px-12 rounded mx-auto text-lg py-[18px] font-semibold block lg:text-md lg:py-3 lg:mt-4"
        _msttexthash="29148314"
        _msthash="954"
      >
        立即检查您的文本
      </button>
    </div>
  </div>
</template>

<style lang="less" scoped>
*,
:after,
:before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--ux-color-border) / 1);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.relative {
  position: relative;
}
.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-center {
  text-align: center;
}
.py-\[120px\] {
  padding-top: 120px;
  padding-bottom: 120px;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.max-w-\[992px\] {
  max-width: 992px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.relative {
  position: relative;
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#FF8811\] {
  --tw-gradient-from: #f81 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255, 136, 17, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#ED27FF\] {
  --tw-gradient-to: rgba(237, 39, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ed27ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#7F50FB\] {
  --tw-gradient-to: #7f50fb var(--tw-gradient-to-position);
}
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
.text-center {
  text-align: center;
}
.text-6xl {
  font-size: 2.5rem;
  line-height: 3.5rem;
}
.font-bold {
  font-weight: 700;
}
.text-transparent {
  color: transparent;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
button:where(:not([class^='coco'])) {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button:where(:not([class^='coco'])) {
  text-transform: none;
}
button:where(:not([class^='coco'])) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button:where(:not([class^='coco'])) {
  cursor: pointer;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.rounded {
  border-radius: 0.25rem;
}
.bg-\[\#165DFF\],
.bg-\[\#165dff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 93 255 / var(--tw-bg-opacity, 1));
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.font-semibold {
  font-weight: 600;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  --ux-primary: 58 126 255;
  background-color: rgb(var(--ux-primary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary:hover {
  --ux-primary: 58 126 255;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ux-primary) / var(--tw-bg-opacity, 1));
}
</style>
